import { useEffect, useState } from "react";
import Child from "./Child";

export default function App() {
  /*
    生命周期：组件从 创建 - 更新 - 销毁整个过程

      创建：初始化渲染阶段(不管如何写，初始化渲染一定会触发) --> 发送请求、设置定时器等任务
        useEffect(() => {}, [])

      更新：更新阶段
        更新后触发
          useEffect(() => {})
          useEffect(() => {}, [x, y, z])

        更新前后都触发

          useEffect(() => { 
            // 更新渲染后
            return () => {
              // 更新渲染前
            } 
          })

          useEffect(() => { 
            // 更新渲染后
            return () => {
              // 更新渲染前
            } 
          }, [x, y, z])

      销毁：卸载阶段 --> 清除定时器等收尾工作
        只想卸载触发
          useEffect(() => { 
            return () => {
              // 卸载触发
            } 
          }, [])

        更新和卸载都触发
          useEffect(() => { 
            return () => {
              // 卸载触发
            } 
          })

          useEffect(() => { 
            return () => {
              // 卸载触发
            } 
          }, [x, y, z])

  */

  const [count, setCount] = useState(0);
  const [age, setAge] = useState(18);
  const [isShowChild, setIsShowChild] = useState(true);

  const handleClick1 = () => {
    setCount(count + 1);
  };
  const handleClick2 = () => {
    setAge(age + 1);
  };

  const handleClick3 = () => {
    setIsShowChild(!isShowChild);
  };

  // 初始化渲染阶段会触发
  useEffect(() => {
    console.log("useEffect: 初始化渲染阶段会触发");
  }, []);

  // 初始化渲染阶段 和 更新阶段都会触发
  useEffect(() => {
    console.log("useEffect: 初始化渲染阶段 和 更新阶段都会触发 App 111");
    // 第二个参数数组：只要监听的一个值发生变化，就会重新触发函数
    // 依赖项
  }, [count, age]);

  useEffect(() => {
    console.log("useEffect: 初始化渲染阶段 和 更新阶段都会触发 App 222");
    // 当不传依赖项时，初始化渲染阶段 和 更新阶段都会触发
  });

  return (
    <div>
      App... {count} -- {age}
      <button onClick={handleClick1}>更新count</button>
      <button onClick={handleClick2}>更新age</button>
      <button onClick={handleClick3}>更新isShowChild</button>
      {/* 条件渲染，切换显示 */}
      {isShowChild && <Child />}
    </div>
  );
}
